<template>
  <div class="main-content">
    <!--查询条件-->
    <el-form size="mini" :model="searchForm" label-width="110px">
      <el-row>
        <!--<el-col :span="8">-->
          <!--<el-form-item label="分类" prop="type">-->
            <!--<el-cascader-->
              <!--:props="productTypeProps"-->
              <!--:options="queryProductTypeTreeList"-->
              <!--v-model="type"-->
              <!--change-on-select-->
              <!--:show-all-levels="false"-->
              <!--@change="handleChange"-->
              <!--style="width: 100%">-->
            <!--</el-cascader>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
        <el-col :span="8">
          <el-form-item label="起始时间">
            <el-date-picker
              v-model="searchForm.startDate"
              type="datetime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间" style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截止时间">
            <el-date-picker
              v-model="searchForm.endDate"
              type="datetime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间" style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="mini" @click="search" style="margin-left: 15px">查询</el-button>
          <el-button type="primary" size="mini" @click="create">添加</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--数据列表-->
    <el-table :data="tableData" border size="small" stripe :header-cell-style="tableHeaderCellStyle">
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">
          <label>{{scope.$index + 1 + pageSize * (currentPage - 1)}}</label>
        </template>
      </el-table-column>
      <el-table-column prop="classifyId" label="分类" :formatter="formatterClassify" align="center"></el-table-column>
      <el-table-column prop="comment" label="说明" align="center"></el-table-column>
      <el-table-column prop="money" label="金额" align="center"></el-table-column>
      <el-table-column prop="createDatetime" label="创建时间" :formatter="formatterDatetime" align="center"></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="update(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="remove(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="amount" style="float: right"></el-pagination>

    <!--编辑账单-->
    <el-dialog :title="detailDialogTitle" :visible.sync="detailDialogFormVisible" custom-class="dialog" :before-close="beforeHiddenDetailDialog" width="600px">
      <detail ref="detailDialog" :form-data="statementData" :operate="operate" :did="did" @hiddenDetailDialog="hiddenDetailDialog"></detail>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from '../../axios/index'
import Detail from './Detail'
import {
  Row,
  Col,
  Form,
  FormItem,
  Table,
  TableColumn,
  Pagination,
  Input,
  Button,
  Dialog,
  Message
} from 'element-ui'

Vue.use(Row)
Vue.use(Col)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(Input)
Vue.use(Button)
Vue.use(Dialog)

export default {
  data () {
    return {
      // 查询条件
      searchForm: {},
      // 表格样式
      tableHeaderCellStyle: {
        highlightCurrentRow: true
      },
      // 数据列表
      tableData: [],
      // 分页 - 每页显示条数
      pageSize: 10,
      // 分页 - 数据总条数
      amount: 0,
      // 分页 - 当前页数
      currentPage: 1,
      // 全部分类集合
      allClassifyList: [],
      // 弹窗 - 标题
      detailDialogTitle: null,
      // 弹窗 - 是否显示
      detailDialogFormVisible: false,
      // 弹窗 - 表单数据
      statementData: {},
      // 弹窗 - 操作 0添加 1编辑 2查看
      operate: 0,
      // 弹窗 - id
      did: 0
    }
  },
  methods: {
    // 初始化
    initData () {
      axios.post('/classify/findClassifyAll')
        .then(res => {
          if (Number(res.errCode) === 0) {
            this.allClassifyList = res.list
            this.searchData()
          } else {
            Message({showClose: true, message: res.errMsg, type: 'error'})
          }
        })
    },
    // 获取表格数据
    searchData () {
      this.searchForm.userId = sessionStorage.getItem('userId')
      axios.post('/statement/findStatementByPage', {
        page: this.currentPage,
        pageSize: this.pageSize,
        condition: this.searchForm
      }).then(res => {
        console.log(res)
        if (Number(res.errCode) === 0) {
          this.tableData = res.data.list
          this.amount = res.data.amount
        } else {
          Message({showClose: true, message: res.errMsg, type: 'error'})
        }
      })
    },
    // 分页页码改变
    currentChange (val) {
      this.currentPage = val
      this.searchData()
    },
    // 操作 - 查询
    search () {
      this.currentPage = 1
      this.searchData()
    },
    // 操作 - 添加
    create () {
      this.detailDialogTitle = '添加用户'
      this.detailDialogFormVisible = true
      this.statementData = {
        classifyId: null
      }
      this.operate = 0
      this.did++
    },
    // 操作 - 编辑
    update (index, row) {
      this.detailDialogTitle = '编辑用户'
      this.detailDialogFormVisible = true
      this.statementData = JSON.parse(JSON.stringify(row))
      this.operate = 1
      this.did++
    },
    // 操作 - 删除
    remove (index, row) {
      let __this = this
      this.$confirm('数据删除后将无法恢复，是否确认删除？', '提示', {}).then(() => {
        axios.post('/statement/deleteStatement', row).then(res => {
          if (Number(res.errCode) === 0) {
            Message({showClose: true, message: '删除成功！', type: 'success'})
          } else {
            Message({showClose: true, message: res.errMsg, type: 'error'})
          }
          if (__this.tableData.length === 1 && __this.currentPage > 1) {
            __this.currentPage -= 1
          }
          __this.searchData()
        })
      }, () => {}).catch(() => {})
    },
    // 关闭弹窗之前
    beforeHiddenDetailDialog (done) {
      this.$refs['detailDialog'].clearValidate()
      done()
    },
    // 关闭弹窗
    hiddenDetailDialog () {
      this.$refs['detailDialog'].clearValidate()
      this.detailDialogFormVisible = false
      this.searchData()
    },
    // 格式化 - 分类
    formatterClassify (row, column, cellValue) {
      let value = this.allClassifyList.filter(item => { return item.id === cellValue })[0]
      if (value) return value.name
    },
    // 格式化 - 时间
    formatterDatetime (row, column, cellValue) {
      if (cellValue) {
        return cellValue.substr(0, cellValue.length - 2)
      }
      return cellValue
    }
  },
  mounted () {
    this.initData()
  },
  components: {
    Detail
  }
}
</script>
